<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Fetch：中止（Abort）</title>
	</head>
	<body>
		<script>
			// AbortController 对象，中止正在执行中的 fetch 请求。

			// 创建一个控制器：
			// const controller = new AbortController()

			// 控制器是一个极其简单的对象：
			// 它具有单个方法 abort()，
			// 和单个属性 signal，我们可以在这个属性上设置事件监听器。

			// ***************************************************************************************************

			// 完整示例代码：
			let controller = new AbortController() // 创建一个控制器
			let signal = controller.signal // 获取控制器的信号

			// 执行可取消操作部分
			// 获取 “signal” 对象
			// 并将监听器设置为在 controller.abort() 被调用时中止请求
			signal.addEventListener('abort', () => {
				console.log('中止请求')
			})

			// 另一部分，取消（在之后的任何时候）
			controller.abort() // 中止请求

			// 事件触发，signal.aborted 变为 true
			console.log(signal.aborted) // true
		</script>
	</body>
</html>
